<template>
  <div class="jishu-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'memberManagement'" 
          :class="{ 'active': activeTab === 'memberManagement' }"
        >
          成员管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'equipmentManagement'" 
          :class="{ 'active': activeTab === 'equipmentManagement' }"
        >
          设备管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'scheduleManagement'" 
          :class="{ 'active': activeTab === 'scheduleManagement' }"
        >
          排班管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'departmentMeeting'" 
          :class="{ 'active': activeTab === 'departmentMeeting' }"
        >
          部门会议
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'personalCenter'" 
          :class="{ 'active': activeTab === 'personalCenter' }"
        >
          个人中心
        </a>
      </div>
      
      <div class="content-area">
        <!-- 成员管理 -->
        <div class="module-card" v-if="activeTab === 'memberManagement'">
          <div class="module-header">
            <h3>成员管理</h3>
            <button @click="showAddMemberDialog = true" class="btn-primary">添加成员</button>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学院简称</th>
                <th>职位</th>
                <th>联系方式</th>
                <th>入社时间</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(member, index) in jishuMembers" :key="member.id">
                <td>{{ index + 1 }}</td>
                <td>{{ member.name }}</td>
                <td>{{ member.college }}</td>
                <td>{{ member.position }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.joinDate }}</td>
                <td>{{ member.remark || '-' }}</td>
                <td class="operation-buttons">
                  <button @click="handleEditMember(member)" class="btn-edit">编辑</button>
                  <button @click="handleDeleteMember(member.id)" class="btn-delete">删除</button>
                  <button @click="navigateToDetail(member.id)" class="btn-view">详情</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 设备管理 -->
        <div class="module-card" v-if="activeTab === 'equipmentManagement'">
          <div class="module-header">
            <h3>设备管理</h3>
            <button @click="showAddEquipmentDialog = true" class="btn-primary">添加设备</button>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>设备名称</th>
                <th>型号</th>
                <th>数量</th>
                <th>状态</th>
                <th>借用记录</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(equipment, index) in equipments" :key="equipment.id">
                <td>{{ index + 1 }}</td>
                <td>{{ equipment.name }}</td>
                <td>{{ equipment.model }}</td>
                <td>{{ equipment.quantity }}</td>
                <td :class="`status-${equipment.status}`">{{ equipment.status === 'available' ? '可借用' : '已借出' }}</td>
                <td>
                  <button @click="showBorrowRecord(equipment.id)" class="btn-view small">查看</button>
                </td>
                <td class="operation-buttons">
                  <button @click="handleEditEquipment(equipment)" class="btn-edit">编辑</button>
                  <button @click="handleDeleteEquipment(equipment.id)" class="btn-delete">删除</button>
                  <button @click="handleBorrowEquipment(equipment)" class="btn-borrow" :disabled="equipment.status !== 'available'">
                    {{ equipment.status === 'available' ? '借出' : '归还' }}
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 排班管理（日历形式） -->
        <div class="module-card" v-if="activeTab === 'scheduleManagement'">
          <div class="module-header">
            <h3>排班管理</h3>
            <div>
              <button @click="currentWeek--" :disabled="currentWeek <= 1" class="btn-secondary">上一周</button>
              <span class="week-indicator">第{{ currentWeek }}周</span>
              <button @click="currentWeek++" class="btn-secondary">下一周</button>
            </div>
          </div>
          
          <div class="schedule-table-container">
            <table class="schedule-table">
              <thead>
                <tr>
                  <th>时间</th>
                  <th v-for="day in weekDays" :key="day">{{ day }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="time in broadcastTimes" :key="time">
                  <td class="time-column">{{ time }}</td>
                  <td v-for="day in weekDays" :key="day + time">
                    <div class="schedule-item" v-if="getScheduleItem(day, time)">
                      <div class="schedule-theme">{{ getScheduleItem(day, time).theme }}</div>
                      <div class="schedule-members">
                        <span>采播1: {{ getScheduleItem(day, time).caibo1 }}</span>
                        <span>采播2: {{ getScheduleItem(day, time).caibo2 }}</span>
                        <span>技术: {{ getScheduleItem(day, time).jishu }}</span>
                      </div>
                      <button @click="editSchedule(day, time)" class="edit-btn">编辑</button>
                    </div>
                    <div class="empty-schedule" v-else>
                      <button @click="addSchedule(day, time)" class="add-btn">+ 添加</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 部门会议 -->
        <div class="module-card" v-if="activeTab === 'departmentMeeting'">
          <div class="module-header">
            <h3>部门会议</h3>
            <button @click="showAddMeetingDialog = true" class="btn-primary">新增会议内容</button>
          </div>
          
          <div class="meeting-actions">
            <button @click="downloadMeetingTemplate" class="btn-secondary">下载会议记录模板</button>
          </div>
          
          <div class="meeting-list">
            <div v-for="meeting in meetings" :key="meeting.id" class="meeting-item">
              <div class="meeting-header">
                <h4>{{ meeting.title }}</h4>
                <div class="meeting-meta">
                  <span>日期：{{ meeting.date }}</span>
                  <span>主持人：{{ meeting.host }}</span>
                  <span>参会人数：{{ meeting.attendeeCount }}</span>
                </div>
              </div>
              <div class="meeting-content">
                <p>{{ meeting.content.length > 100 ? meeting.content.slice(0, 100) + '...' : meeting.content }}</p>
              </div>
              <div class="meeting-operations">
                <button @click="handleViewMeeting(meeting)" class="btn-view">查看详情</button>
                <button @click="handleEditMeeting(meeting)" class="btn-edit">编辑</button>
                <button @click="handleDeleteMeeting(meeting.id)" class="btn-delete">删除</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人中心 -->
        <div class="module-card" v-if="activeTab === 'personalCenter'">
          <h3>个人中心</h3>
          <div class="profile-form">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="userProfile.name" />
            </div>
            <div class="form-group">
              <label>学号</label>
              <input type="text" v-model="userProfile.studentId" />
            </div>
            <div class="form-group">
              <label>班级</label>
              <input type="text" v-model="userProfile.class" />
            </div>
            <div class="form-group">
              <label>联系电话</label>
              <input type="text" v-model="userProfile.phone" />
            </div>
            <button @click="saveProfile" class="btn-primary">保存信息</button>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed, onMounted, watch } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

// 检查登录状态
onMounted(() => {
  if (!authStore.isLoggedIn) {
    router.push('/login')
  }
  initData()
})

// 初始化数据
const initData = () => {
  // 从localStorage加载数据
  const savedMembers = localStorage.getItem('jishuMembers')
  if (savedMembers) {
    members.value = JSON.parse(savedMembers)
  }
  
  const savedEquipments = localStorage.getItem('jishuEquipments')
  if (savedEquipments) {
    equipments.value = JSON.parse(savedEquipments)
  }
  
  const savedSchedules = localStorage.getItem(`jishuSchedules_${currentWeek.value}`)
  if (savedSchedules) {
    schedules.value = JSON.parse(savedSchedules)
  }
  
  const savedMeetings = localStorage.getItem('jishuMeetings')
  if (savedMeetings) {
    meetings.value = JSON.parse(savedMeetings)
  }
  
  const savedProfile = localStorage.getItem('jishuMinisterProfile')
  if (savedProfile) {
    userProfile.value = JSON.parse(savedProfile)
  }
}

// 标签页管理
const activeTab = ref('memberManagement')

// 成员管理相关
const members = ref([
  { id: 1, name: '张三', studentId: '2021001', college: '计算机学院', position: '部长', phone: '13800138001', joinDate: '2021-09-01', remark: '负责设备维护' },
  { id: 2, name: '李四', studentId: '2021002', college: '信息学院', position: '副部长', phone: '13800138002', joinDate: '2021-09-01', remark: '负责网站维护' },
  { id: 3, name: '王五', studentId: '2022003', college: '软件学院', position: '干事', phone: '13800138003', joinDate: '2022-03-15', remark: '擅长音视频处理' }
])

const jishuMembers = computed(() => {
  return members.value
})

const showAddMemberDialog = ref(false)
const showEditMemberDialog = ref(false)
const newMember = ref({ 
  name: '', 
  studentId: '', 
  college: '',
  position: '',
  phone: '', 
  joinDate: '',
  remark: '' 
})
const editingMember = ref({})

const addMember = () => {
  if (!newMember.value.name || !newMember.value.studentId || !newMember.value.phone || !newMember.value.college || !newMember.value.joinDate) {
    alert('请填写必填字段')
    return
  }
  
  newMember.value.id = Date.now()
  members.value.push({ ...newMember.value })
  
  // 重置表单
  newMember.value = { 
    name: '', 
    studentId: '', 
    college: '',
    position: '',
    phone: '', 
    joinDate: '',
    remark: '' 
  }
  showAddMemberDialog.value = false
  
  // 保存到localStorage
  localStorage.setItem('jishuMembers', JSON.stringify(members.value))
}

const handleEditMember = (member) => {
  editingMember.value = { ...member }
  showEditMemberDialog.value = true
}

const updateMember = () => {
  if (!editingMember.value.name || !editingMember.value.studentId || !editingMember.value.phone || !editingMember.value.college || !editingMember.value.joinDate) {
    alert('请填写必填字段')
    return
  }
  
  const index = members.value.findIndex(m => m.id === editingMember.value.id)
  if (index !== -1) {
    members.value[index] = { ...editingMember.value }
  }
  
  showEditMemberDialog.value = false
  localStorage.setItem('jishuMembers', JSON.stringify(members.value))
}

const handleDeleteMember = (id) => {
  if (confirm('确定要删除该成员吗？')) {
    members.value = members.value.filter(member => member.id !== id)
    localStorage.setItem('jishuMembers', JSON.stringify(members.value))
  }
}

const navigateToDetail = (id) => {
  router.push(`/buzhang/jishu/detail/${id}`)
}

// 设备管理相关
const equipments = ref([
  { id: 1, name: '麦克风', model: 'Shure SM58', quantity: 5, status: 'available', borrowRecords: [] },
  { id: 2, name: '调音台', model: 'Yamaha MG10', quantity: 2, status: 'available', borrowRecords: [] },
  { id: 3, name: '笔记本电脑', model: 'MacBook Pro', quantity: 3, status: 'available', borrowRecords: [] }
])

const showAddEquipmentDialog = ref(false)
const showEditEquipmentDialog = ref(false)
const newEquipment = ref({
  name: '',
  model: '',
  quantity: 1,
  status: 'available',
  borrowRecords: []
})
const editingEquipment = ref({})

const addEquipment = () => {
  if (!newEquipment.value.name || !newEquipment.value.model) {
    alert('请填写设备名称和型号')
    return
  }
  
  newEquipment.value.id = Date.now()
  equipments.value.push({ ...newEquipment.value })
  
  // 重置表单
  newEquipment.value = {
    name: '',
    model: '',
    quantity: 1,
    status: 'available',
    borrowRecords: []
  }
  showAddEquipmentDialog.value = false
  
  // 保存到localStorage
  localStorage.setItem('jishuEquipments', JSON.stringify(equipments.value))
}

const handleEditEquipment = (equipment) => {
  editingEquipment.value = { ...equipment }
  showEditEquipmentDialog.value = true
}

const updateEquipment = () => {
  if (!editingEquipment.value.name || !editingEquipment.value.model) {
    alert('请填写设备名称和型号')
    return
  }
  
  const index = equipments.value.findIndex(e => e.id === editingEquipment.value.id)
  if (index !== -1) {
    equipments.value[index] = { ...editingEquipment.value }
  }
  
  showEditEquipmentDialog.value = false
  localStorage.setItem('jishuEquipments', JSON.stringify(equipments.value))
}

const handleDeleteEquipment = (id) => {
  if (confirm('确定要删除该设备吗？')) {
    equipments.value = equipments.value.filter(equipment => equipment.id !== id)
    localStorage.setItem('jishuEquipments', JSON.stringify(equipments.value))
  }
}

const handleBorrowEquipment = (equipment) => {
  const index = equipments.value.findIndex(e => e.id === equipment.id)
  if (index !== -1) {
    if (equipments.value[index].status === 'available') {
      // 借出设备
      const borrower = prompt('请输入借用者姓名:')
      if (borrower) {
        equipments.value[index].status = 'borrowed'
        equipments.value[index].borrowRecords.push({
          id: Date.now(),
          borrower,
          borrowDate: new Date().toISOString().split('T')[0],
          returnDate: null
        })
      }
    } else {
      // 归还设备
      const recordIndex = equipments.value[index].borrowRecords.findIndex(r => !r.returnDate)
      if (recordIndex !== -1) {
        equipments.value[index].borrowRecords[recordIndex].returnDate = new Date().toISOString().split('T')[0]
        equipments.value[index].status = 'available'
      }
    }
    localStorage.setItem('jishuEquipments', JSON.stringify(equipments.value))
  }
}

const showBorrowRecord = (equipmentId) => {
  const equipment = equipments.value.find(e => e.id === equipmentId)
  if (equipment && equipment.borrowRecords.length > 0) {
    let records = '借用记录:\n'
    equipment.borrowRecords.forEach(record => {
      records += `${record.borrowDate} - ${record.returnDate || '未归还'}: ${record.borrower}\n`
    })
    alert(records)
  } else {
    alert('暂无借用记录')
  }
}

// 排班管理相关（日历形式）
const allThemes = [
  '团学文化', '名著赏析', '音乐鉴赏', '影视鉴赏', '一载百味',
  '旅游地理', '怀旧时光机', '传统文化', '校园热点', '科技之光'
]
const weekDays = ['周一', '周二', '周三', '周四', '周五']
const broadcastTimes = ['12:00', '17:20'] // 午播和晚播固定时间
const currentWeek = ref(1)
const schedules = ref([
  { id: 1, week: 1, date: '周一', time: '12:00', theme: '团学文化', caibo1: '张三', caibo2: '李四', jishu: '王五' },
  { id: 2, week: 1, date: '周一', time: '17:20', theme: '名著赏析', caibo1: '王五', caibo2: '赵六', jishu: '张三' }
])

// 监听周数变化，加载对应周的排班数据
watch(currentWeek, (newVal) => {
  const savedSchedules = localStorage.getItem(`jishuSchedules_${newVal}`)
  if (savedSchedules) {
    schedules.value = JSON.parse(savedSchedules)
  } else {
    schedules.value = []
  }
})

const getScheduleItem = (day, time) => {
  return schedules.value.find(item => item.date === day && item.time === time && item.week === currentWeek.value)
}

const addSchedule = (day, time) => {
  const newId = Date.now()
  schedules.value.push({
    id: newId,
    week: currentWeek.value,
    date: day,
    time: time,
    theme: allThemes[0],
    caibo1: '',
    caibo2: '',
    jishu: ''
  })
  editSchedule(day, time)
}

const editSchedule = (day, time) => {
  const item = getScheduleItem(day, time)
  if (item) {
    // 这里可以实现弹窗编辑逻辑
    const jishuMember = prompt('请输入技术成员:', item.jishu)
    if (jishuMember !== null) {
      item.jishu = jishuMember
      localStorage.setItem(`jishuSchedules_${currentWeek.value}`, JSON.stringify(schedules.value))
    }
  }
}

// 部门会议相关
const meetings = ref([
  { 
    id: 1, 
    title: '新学期工作安排会议',
    date: '2023-09-01',
    host: '张三',
    attendees: ['张三', '李四', '王五'],
    attendeeCount: 3,
    location: '会议室A',
    content: '讨论新学期技术部的工作安排，包括设备维护计划、新人培训方案等'
  }
])

const showAddMeetingDialog = ref(false)
const showEditMeetingDialog = ref(false)
const newMeeting = ref({
  title: '',
  date: '',
  host: '',
  attendees: [],
  attendeeCount: 0,
  location: '',
  content: ''
})
const editingMeeting = ref({})

const addMeeting = () => {
  if (!newMeeting.value.title || !newMeeting.value.date || !newMeeting.value.host) {
    alert('请填写会议标题、日期和主持人')
    return
  }
  
  newMeeting.value.id = Date.now()
  meetings.value.push({ ...newMeeting.value })
  
  // 重置表单
  newMeeting.value = {
    title: '',
    date: '',
    host: '',
    attendees: [],
    attendeeCount: 0,
    location: '',
    content: ''
  }
  showAddMeetingDialog.value = false
  
  // 保存到localStorage
  localStorage.setItem('jishuMeetings', JSON.stringify(meetings.value))
}

const handleEditMeeting = (meeting) => {
  editingMeeting.value = { ...meeting }
  showEditMeetingDialog.value = true
}

const updateMeeting = () => {
  if (!editingMeeting.value.title || !editingMeeting.value.date || !editingMeeting.value.host) {
    alert('请填写会议标题、日期和主持人')
    return
  }
  
  const index = meetings.value.findIndex(m => m.id === editingMeeting.value.id)
  if (index !== -1) {
    meetings.value[index] = { ...editingMeeting.value }
  }
  
  showEditMeetingDialog.value = false
  localStorage.setItem('jishuMeetings', JSON.stringify(meetings.value))
}

const handleDeleteMeeting = (id) => {
  if (confirm('确定要删除该会议记录吗？')) {
    meetings.value = meetings.value.filter(meeting => meeting.id !== id)
    localStorage.setItem('jishuMeetings', JSON.stringify(meetings.value))
  }
}

const handleViewMeeting = (meeting) => {
  alert(`
    会议标题: ${meeting.title}
    日期: ${meeting.date}
    主持人: ${meeting.host}
    参会人数: ${meeting.attendeeCount}
    地点: ${meeting.location}
    内容: ${meeting.content}
  `)
}

const downloadMeetingTemplate = () => {
  alert('会议记录模板下载中...')
  // 实际项目中这里应该是文件下载逻辑
}

// 个人中心相关
const userProfile = ref({
  name: '',
  studentId: '',
  class: '',
  phone: ''
})

const saveProfile = () => {
  localStorage.setItem('jishuMinisterProfile', JSON.stringify(userProfile.value))
  alert('个人信息保存成功!')
}
</script>

<style scoped>
.jishu-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 220px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: block;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #3498db;
}

.nav-item.active {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}

.content-area {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-card {
  margin-bottom: 25px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

.btn-edit {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-delete {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-view {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-borrow {
  background-color: #ff9800;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-borrow:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.status-available {
  color: #4CAF50;
}

.status-borrowed {
  color: #f44336;
}

.schedule-table-container {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.schedule-table th {
  background-color: #f8f9fa;
}

.time-column {
  background-color: #f0f7ff;
  font-weight: bold;
}

.schedule-item {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
}

.schedule-theme {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.schedule-members {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
  text-align: left;
}

.schedule-members span {
  display: block;
  margin-bottom: 2px;
}

.empty-schedule {
  padding: 10px;
}

.add-btn, .edit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 5px;
}

.week-indicator {
  margin: 0 10px;
  font-weight: bold;
}

.meeting-list {
  margin-top: 20px;
}

.meeting-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.meeting-meta {
  font-size: 12px;
  color: #666;
}

.meeting-meta span {
  display: block;
  margin-bottom: 3px;
}

.meeting-content {
  margin-bottom: 10px;
  color: #333;
}

.meeting-operations {
  display: flex;
  gap: 10px;
}

.profile-form {
  max-width: 600px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
</style>